<template>
  <div class="wrap">
    <!-- v-if="isShow.show" -->
    <div class="tabbar" v-if="route.meta.showTabBar">
      <router-link to="/">
        <img
          src="https://static.xuantong.cn/images/wapindex/home_sel_ic.png"
          alt=""
        />
        <p>首页</p>
      </router-link>
      <router-link to="/Course">
        <img
          src="https://static.xuantong.cn/images/wapindex/attend_class_nor_ic.png"
          alt=""
        />
        <p>去上课</p>
      </router-link>
      <router-link to="/Study">
        <img src="" alt="" />
        <p>文房</p>
      </router-link>
      <router-link to="My">
        <img
          src="https://static.xuantong.cn/images/wapindex/mine_nor_ic.png"
          alt=""
        />
        <p>我的</p>
      </router-link>
    </div>
    <Suspense>
      <router-view />
    </Suspense>
  </div>
</template>

<script setup>
import { watch, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
let router = useRouter();

// let isShow = reactive({
//   show: true,
// });
// 通过watch监听 控制Tabbar显示于隐藏
// watch(
//   () => router.currentRoute.value.path,
//   (newValue, oldValue) => {
//     console.log("watch", newValue);
//     if (
//       newValue.startsWith("/swiperInfo") ||
//       newValue.startsWith("/CourseInfo")
//     ) {
//       isShow.show = false;
//     } else {
//       isShow.show = true;
//     }
//   },
//   { immediate: true }  // 立即执行
// );
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.wrap {
  .tabbar {
    z-index: 1000;
    background-color: lightblue;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #2c3e50;
    }
    p {
      font-size: 12px;
      margin-top: 3px;
    }
    img {
      width: 20px;
      height: 20px;
      margin: 0 auto;
    }
  }
}

a {
  &.router-link-exact-active {
    color: #42b983;
  }
}
</style>
